<template>
  <div class="gs-second" :style="{height: heightNum}" :id="gsData.id" :ref="gsData.id"></div>
</template>

<script>
export default {
  props:{
    gsData:{},
    seriesCenter:{
      type: Array,
      default: function(){
        return [80, 100]
      }
    },
    heightNum:{
      type: String,
      default: '120px'
    }
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
      this.$echarts.init(this.$refs[this.gsData.id]).setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            center: this.seriesCenter,
            radius: "100%",
            min: 0,
            max: 1,
            splitNumber: 8,
            pointer: {
                icon: 'triangle',
                show: true,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                    color: "#2DEFFF",
                },
                length: '10%',
                width: 6,
            },
            axisLine: {
              lineStyle: {
                width: 1,
                color: [
                  [0.25, "#FF6E76"],
                  [0.5, "#FDDD60"],
                  [0.75, "#58D9F9"],
                  [1, "#7CFFB2"],
                ],
              },
            },
            axisTick: {
              length: 2,
              lineStyle: {
                color: "#ffffff",
                width: 1,
                opacity:0.8
              },
              distance:3
            },
            splitLine: {
              length: 4,
              lineStyle: {
                color: "#ffffff",
                width: 1,
              },
              distance:3
            },
            axisLabel: {
              show:false
            },
            title: {
              fontSize: 12,
              color:"#fff"
            },
            detail: {
              fontSize: 18,
              offsetCenter: [0, "-10%"],
              valueAnimation: true,
              formatter: function (value) {
                return value + "%";
              },
              color: "#2DEFFF",
            },
            data: [
              {
                value: this.gsData.radio==='-'?0:this.gsData.radio,
                name: this.gsData.radioName,
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.gs-second {
  width: 100%;
  // height:100px;
  margin-bottom:10px;
}
</style>
